Angular Material একটি শক্তিশালী UI লাইব্রেরি যা অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলোর জন্য প্রি-বিল্ট কম্পোনেন্ট এবং সেমান্টিক ডিজাইন সরবরাহ করে। এটি সাধারণ এবং প্রাথমিক উপাদানগুলোর বাইরে আরও কিছু উন্নত এবং অ্যাডভান্সড ফিচার সরবরাহ করে যা ডেভেলপারদের একটি আরও ইন্টারঅ্যাকটিভ, স্কেলেবেল এবং রেসপন্সিভ UI তৈরি করতে সাহায্য করে। এই টপিকগুলো অ্যাঙ্গুলার ম্যাটেরিয়াল ব্যবহার করে অ্যাপ্লিকেশন উন্নত করতে বিভিন্ন অ্যাডভান্সড কনসেপ্টের ওপর ভিত্তি করে।
Angular CDK এর ড্র্যাগ-এন্ড-ড্রপ ফিচার ব্যবহার করে আপনি উপাদানগুলোকে সহজে ড্র্যাগ এবং ড্রপ করতে পারেন। এটি বিশেষ করে টেবিল, লিস্ট, এবং ট্রি কম্পোনেন্টে ব্যবহৃত হয়। এটি একটি শক্তিশালী ফিচার যা ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।
প্রধান বৈশিষ্ট্যসমূহ:
কোড উদাহরণ:
import { DragDropModule } from '@angular/cdk/drag-drop';
MatDialog কম্পোনেন্ট ব্যবহার করে আপনি ডায়ালগ তৈরি করতে পারেন যা সাধারণত ব্যবহারকারীর কাছে আরও বিস্তারিত তথ্য প্রদর্শন করতে বা অ্যাপ্লিকেশনের নির্দিষ্ট অংশে ফোকাস করার জন্য ব্যবহৃত হয়। এটি মডাল উইন্ডো হিসেবে কাজ করে এবং ব্যবহারকারীকে অ্যাপ্লিকেশনের অন্যান্য অংশ থেকে আলাদা রাখে।
প্রধান বৈশিষ্ট্যসমূহ:
কোড উদাহরণ:
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
})
export class DialogOverviewExample {
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogContentExample, {
width: '250px',
data: { name: 'Angular' },
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
MatSnackBar কম্পোনেন্ট অ্যাপ্লিকেশনে অস্থায়ী বার্তা বা নোটিফিকেশন প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি অস্থায়ী UI এলিমেন্ট, যা সাধারণত অপারেশনের সফলতা বা ত্রুটি বার্তা দেখানোর জন্য ব্যবহৃত হয়।
প্রধান বৈশিষ্ট্যসমূহ:
কোড উদাহরণ:
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-snackbar-example',
templateUrl: './snackbar-example.html',
})
export class SnackbarExample {
constructor(private snackBar: MatSnackBar) {}
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
});
}
}
MatTable কম্পোনেন্ট Angular Material এর অন্যতম গুরুত্বপূর্ণ কম্পোনেন্ট। এটি ডেটার হায়ারার্কি এবং পারফরম্যান্স অপটিমাইজেশন প্রদান করে। টেবিল কম্পোনেন্টের মধ্যে পেজিনেশন, ফিল্টারিং, এবং সার্টিং যোগ করার সুবিধা রয়েছে। এটি ডেটার স্ক্রলিং এবং অন্যান্য ডেটা অপারেশনগুলো ম্যানেজ করতে সাহায্য করে।
প্রধান বৈশিষ্ট্যসমূহ:
কোড উদাহরণ:
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Angular Material এ থিমিং সিস্টেম ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের UI কাস্টমাইজ করতে পারেন। আপনি বিভিন্ন প্যালেট এবং টাইপোগ্রাফি ব্যবহার করে প্রজেক্টের ডিজাইন নির্ধারণ করতে পারেন। Angular Material আপনাকে ডিফল্ট থিম থেকে কাস্টম থিম তৈরির সুযোগ দেয়।
প্রধান বৈশিষ্ট্যসমূহ:
কোড উদাহরণ:
@import '~@angular/material/theming';
// কাস্টম থিম তৈরি
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
),
));
@include angular-material-theme($theme);
MatDatepicker কম্পোনেন্ট ব্যবহার করে আপনি সহজেই একটি ক্যালেন্ডার ভিত্তিক ডেটা ইনপুট তৈরি করতে পারেন। এটি ব্যবহারকারীদের একটি নির্দিষ্ট তারিখ নির্বাচন করতে সাহায্য করে এবং অন্যান্য ইনপুট ফিল্ডের সাথে ইন্টিগ্রেশন করা যায়।
প্রধান বৈশিষ্ট্যসমূহ:
কোড উদাহরণ:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Angular Material এর কম্পোনেন্টগুলো অ্যাক্সেসিবিলিটি এবং ARIA স্ট্যান্ডার্ড অনুসরণ করে। এটি ডেভেলপারদের জন্য সহজেই অ্যাক্সেসিবল UI তৈরি করতে সাহায্য করে। এছাড়া, কাস্টম নেভিগেশন, ফোকাস ম্যানেজমেন্ট এবং স্ক্রীন রিডার সাপোর্ট সরবরাহ করে।
Angular Material এর অ্যাডভান্সড টপিকস ডেভেলপারদের জন্য একাধিক কার্যকরী টুল এবং কম্পোনেন্ট সরবরাহ করে যা তাদের অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ, ইউজার-ফ্রেন্ডলি, এবং কাস্টমাইজেবল করে তোলে। ড্র্যাগ-এন্ড-ড্রপ, ডায়ালগ, স্ন্যাকবার, ডেটা টেবিল, এবং থিমিং-এর মতো ফিচার ব্যবহার করে আপনি আরও উন্নত এবং সাশ্রয়ী UI তৈরি করতে পারেন। Angular Material এর এই অ্যাডভান্সড ফিচারগুলো অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও শক্তিশালী এবং দ্রুততর করে তোলে।
Angular Material Overlay একটি অত্যন্ত শক্তিশালী কম্পোনেন্ট যা কনটেন্ট বা উপাদানকে একটি ভাসমান স্তরের (floating layer) আকারে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত পপ-আপ, টুলটিপ, ড্রপডাউন মেনু, ডায়ালগ, অথবা স্ন্যাকবার তৈরি করতে ব্যবহৃত হয়।
Angular Material Overlay এর মাধ্যমে আপনি কাস্টম এবং অ্যাডভান্সড ইউজার ইন্টারফেস উপাদান তৈরি করতে পারেন, যেখানে ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য ভাসমান উপাদান প্রদর্শিত হয়, যা অ্যাপ্লিকেশনের অন্যান্য অংশের সাথে মিশে না যায়।
Overlay হল একটি উপাদান যা সাধারণত ব্যবহারকারীর অ্যাপ্লিকেশনের জন্য দৃশ্যমান হলেও অন্যান্য কনটেন্টের উপরে থাকে। এটি কোনো নির্দিষ্ট স্থানে প্রদর্শিত হয় এবং সেক্ষেত্রে ব্যাকগ্রাউন্ডের কন্টেন্টের উপরে অবস্থান করে।
Overlay ব্যবহারের কিছু সাধারণ উদাহরণ হলো:
MatMenuModule, MatDialogModule, MatSnackBarModule ইত্যাদি মডিউলগুলো Angular Material থেকে Overlay ব্যবহার করার জন্য ইমপোর্ট করতে হবে।
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';
এখানে একটি Overlay ব্যবহারের উদাহরণ দেখানো হচ্ছে যেখানে স্ন্যাকবার (Snackbar) ব্যবহার করা হয়েছে।
<button mat-button (click)="openSnackBar()">Show SnackBar</button>
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-overlay-example',
templateUrl: './overlay-example.component.html',
styleUrls: ['./overlay-example.component.css']
})
export class OverlayExampleComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackBar() {
this.snackBar.open('Message successfully sent!', 'Close', {
duration: 2000,
});
}
}
এখানে:
MatSnackBar: এটি একটি সহজ Overlay উপাদান যা ছোট বার্তা প্রদর্শন করতে ব্যবহৃত হয়। এখানে, openSnackBar() মেথডটি একটি বার্তা দেখানোর জন্য ব্যবহার করা হয়েছে, যা ২ সেকেন্ড পর অটোমেটিক্যালি ক্লোজ হয়ে যাবে।Overlay এর একটি অন্যতম ব্যবহার হল MatDialog কম্পোনেন্টের মাধ্যমে মডাল ডায়ালগ তৈরি করা। এটি সাধারণত মডাল উইন্ডো হিসেবে ব্যবহৃত হয়, যা ফর্ম বা কনফিরমেশন প্রদর্শনের জন্য উপযোগী।
<button mat-button (click)="openDialog()">Open Dialog</button>
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-dialog-overview-example',
templateUrl: './dialog-overview-example.html',
})
export class DialogOverviewExample {
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { name: 'Angular' },
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
template: `<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
<p>Here is the content of the dialog!</p>
</div>`,
})
export class DialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
এখানে:
MatMenu একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যা mat-menu-trigger এর মাধ্যমে ট্রিগার করা হয়।
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Option 1</button>
<button mat-menu-item>Option 2</button>
<button mat-menu-item>Option 3</button>
</mat-menu>
এখানে:
Angular Material Overlay কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ভাসমান উপাদান তৈরি করতে পারেন, যেমন ড্রপডাউন মেনু, স্ন্যাকবার, টুলটিপ, ডায়ালগ এবং আরও অনেক কিছু। এটি UI উপাদানগুলিকে খুবই ইন্টারঅ্যাকটিভ এবং অ্যাক্সেসিবল করে তোলে। Angular Material Dialog, MatSnackBar, এবং MatMenu এর মাধ্যমে আপনি সাশ্রয়ী ও কাস্টমাইজযোগ্য Overlay উপাদান তৈরি করতে পারবেন।
Angular Material এর MatDialog এবং MatMenu কম্পোনেন্টের মাধ্যমে আপনি সহজেই overlay তৈরি করতে পারেন। ওভারলে সাধারণত মোডাল উইন্ডো, পপআপ বা ডায়লগ বক্স তৈরি করতে ব্যবহৃত হয়। Angular Material এর Overlay কম্পোনেন্ট আরও উন্নত কাস্টমাইজেশন এবং ফিচার সমর্থন করে, যেমন পজিশনিং, এনিমেশন, এবং ক্লোজিং ফাংশন।
এখানে MatDialog ব্যবহার করে ওভারলে তৈরি এবং কাস্টমাইজ করার পদ্ধতি ব্যাখ্যা করা হলো।
MatDialog কম্পোনেন্টটি একটি পপ-আপ ডায়লগ তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীর ইনপুট বা তথ্য প্রদর্শনের জন্য উপযুক্ত।
প্রথমে, MatDialogModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
]
})
export class AppModule {}
ডায়লগ তৈরি করতে আপনাকে একটি নতুন কম্পোনেন্ট তৈরি করতে হবে যা ডায়লগের কন্টেন্ট ধারণ করবে।
ng generate component dialog-content
এখন, dialog-content.component.ts ফাইলের মধ্যে আপনার ডায়লগ কনটেন্টের লজিক যোগ করুন।
import { Component } from '@angular/core';
@Component({
selector: 'app-dialog-content',
template: `
<h1 mat-dialog-title>Dialog</h1>
<div mat-dialog-content>
<p>This is an overlay dialog content.</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="closeDialog()">Close</button>
</div>
`
})
export class DialogContentComponent {
constructor(public dialogRef: MatDialog) {}
closeDialog(): void {
this.dialogRef.close();
}
}
এখানে:
আপনি যেই কম্পোনেন্টে ডায়লগ ওপেন করতে চান, সেখানে MatDialog ইনজেক্ট করুন এবং open() মেথড ব্যবহার করুন।
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogContentComponent } from './dialog-content/dialog-content.component';
@Component({
selector: 'app-root',
template: `
<button mat-button (click)="openDialog()">Open Dialog</button>
`
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
this.dialog.open(DialogContentComponent, {
width: '300px',
data: { message: 'This is a custom message' }
});
}
}
এখানে:
আপনি ডায়লগের জন্য কাস্টম স্টাইল এবং এনিমেশন যোগ করতে পারেন। যেমন, CSS ব্যবহার করে ডায়লগের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা।
::ng-deep .mat-dialog-container {
background-color: #f1f1f1;
border-radius: 8px;
padding: 20px;
}
এটি ডায়লগের পটভূমি রঙ এবং স্টাইল কাস্টমাইজ করবে।
Angular Material এর Overlay কম্পোনেন্ট আপনাকে আরও উন্নত কাস্টমাইজেশন এবং কন্ট্রোল দেয়, যেমন কাস্টম পজিশনিং, এনিমেশন এবং ক্লোজিং ট্রিগার। আপনি MatDialog এর পরিবর্তে Overlay কম্পোনেন্ট ব্যবহার করতে পারেন, যা এক্সট্রা কন্ট্রোল অফার করে।
প্রথমে, OverlayModule ইমপোর্ট করতে হবে।
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
imports: [
OverlayModule
]
})
export class AppModule {}
এখন, আপনি OverlayService ব্যবহার করে একটি কাস্টম overlay তৈরি করতে পারেন।
import { Component } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
@Component({
selector: 'app-root',
template: `
<button mat-button (click)="openOverlay()">Open Overlay</button>
`
})
export class AppComponent {
constructor(private overlay: Overlay) {}
openOverlay(): void {
const overlayRef = this.overlay.create();
const portal = new ComponentPortal(OverlayContentComponent);
overlayRef.attach(portal);
}
}
@Component({
selector: 'app-overlay-content',
template: `<p>This is a custom overlay content</p>`
})
export class OverlayContentComponent {}
এখানে:
Angular Material Overlay এবং MatDialog কম্পোনেন্টগুলি আপনাকে অত্যন্ত কাস্টমাইজেবল এবং ব্যবহারকারী-বান্ধব পপআপ বা ডায়লগ উইন্ডো তৈরি করতে সাহায্য করে। MatDialog সরাসরি পপআপ ডায়লগ তৈরি করতে ব্যবহৃত হয়, যখন Overlay কম্পোনেন্ট আরও উন্নত কাস্টমাইজেশন এবং নিয়ন্ত্রণ প্রদান করে। আপনি ডায়লগ এবং overlay এর মাধ্যমে সহজে ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন যা অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি করে তোলে।
Angular Material এর Virtual Scrolling কম্পোনেন্ট, যা MatVirtualScrollViewport নামে পরিচিত, বড় ডেটা সেটগুলিকে স্ক্রল করার সময় পারফরম্যান্স উন্নত করতে ব্যবহৃত হয়। ভার্চুয়াল স্ক্রলিং আপনাকে শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো লোড করতে এবং বাকি আইটেমগুলোকে Lazy Load করতে সহায়তা করে। এতে পেজ লোডের সময় এবং মেমরি ব্যবহারে সাশ্রয় হয়, বিশেষ করে যখন আপনি বড় ডেটা সেট বা তালিকা প্রদর্শন করতে চান।
ভার্চুয়াল স্ক্রলিং ব্যবহার করার মাধ্যমে, আপনি হাজার হাজার আইটেমের মধ্যে দ্রুত স্ক্রল করতে পারবেন, কারণ Angular শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো ম্যানেজ করে এবং বাকি আইটেমগুলো লোড করা হয় যখন ব্যবহারকারী স্ক্রল করে।
ভার্চুয়াল স্ক্রলিং ব্যবহারের জন্য ScrollingModule ইমপোর্ট করতে হবে।
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [ScrollingModule]
})
export class AppModule {}
Angular Material এর MatVirtualScrollViewport ব্যবহার করে ভার্চুয়াল স্ক্রলিং যুক্ত করা যেতে পারে। নিচে একটি উদাহরণ দেয়া হলো:
<mat-virtual-scroll-viewport itemSize="50" [minBufferPx]="200" [maxBufferPx]="400">
<div *cdkVirtualFor="let item of items" class="item">
{{ item }}
</div>
</mat-virtual-scroll-viewport>
এখানে:
*ngFor এর মতো কাজ করে, কিন্তু শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো রেন্ডার করে।এখন টাইপস্ক্রিপ্ট ফাইলে একটি ডেটা অ্যারে তৈরি করতে হবে যা ভার্চুয়াল স্ক্রলিংয়ের জন্য ব্যবহার হবে। এখানে একটি উদাহরণ দেয়া হলো:
import { Component } from '@angular/core';
@Component({
selector: 'app-virtual-scroll',
templateUrl: './virtual-scroll.component.html',
styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
// উদাহরণস্বরূপ ১০০০ আইটেমের একটি তালিকা
items = Array.from({ length: 1000 }, (_, i) => `Item #${i + 1}`);
}
এখানে, আমরা একটি 1000 আইটেমের তালিকা তৈরি করেছি যা ভার্চুয়াল স্ক্রলিং দ্বারা প্রদর্শিত হবে।
MatVirtualScrollViewport এর ভিতরে থাকা আইটেমগুলোর সাইজ এবং মাপ কাস্টমাইজ করতে CSS বা SCSS ব্যবহার করা যেতে পারে।
.item {
height: 50px; /* আইটেমের উচ্চতা */
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
এখানে, .item ক্লাসটি প্রতিটি আইটেমের স্টাইলিং নির্ধারণ করে।
Angular Material Virtual Scrolling ডেভেলপারদের জন্য একটি শক্তিশালী টুল যা বড় ডেটাসেট বা লম্বা তালিকা প্রদর্শনের সময় পারফরম্যান্সকে অনেক উন্নত করে। এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে এবং ব্রাউজারকে অতিরিক্ত মেমরি এবং প্রসেসিংয়ের চাপ থেকে মুক্ত রাখে। আপনি MatVirtualScrollViewport এবং cdkVirtualFor ডিরেকটিভ ব্যবহার করে সহজেই ভার্চুয়াল স্ক্রলিং সক্ষম করতে পারেন এবং বড় ডেটা সেটের সাথে কাজ করা অনেক দ্রুত এবং কার্যকরী হবে।
Angular Material এর MatList কম্পোনেন্ট সাধারণত একটি স্টাইলিশ এবং কাস্টমাইজযোগ্য লিস্ট তৈরি করতে ব্যবহৃত হয়। কিন্তু যখন লিস্টে অনেক ডেটা থাকে, তখন পুরো লিস্টটি লোড করা এবং ডিসপ্লে করা পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে, বিশেষত মোবাইল ডিভাইসে। এর সমাধান হিসেবে, Virtual Scrolling বা ভার্চুয়াল স্ক্রল ব্যবহার করা হয়, যা শুধুমাত্র দৃশ্যমান এলিমেন্টগুলো লোড করে, এর ফলে পারফরম্যান্স উন্নত হয়।
Angular Material এর MatList এর সাথে ভার্চুয়াল স্ক্রল ব্যবহার করার জন্য CdkVirtualScrollViewport এবং CdkScrollingModule ব্যবহার করা হয়।
ভার্চুয়াল স্ক্রল ব্যবহার করার জন্য প্রথমে CdkScrollingModule এবং MatListModule ইমপোর্ট করতে হবে।
import { CdkScrollingModule } from '@angular/cdk/scrolling';
import { MatListModule } from '@angular/material/list';
@NgModule({
imports: [
CdkScrollingModule,
MatListModule
]
})
export class AppModule { }
এখন, CdkVirtualScrollViewport ব্যবহার করে ভার্চুয়াল স্ক্রল যোগ করা যাবে। এটি ব্যবহারকারী স্ক্রলিং করলে শুধুমাত্র দৃশ্যমান আইটেমগুলোই লোড করবে এবং অন্যান্য আইটেমগুলো লোড হবে না যতক্ষণ না সেগুলো দৃশ্যমান হয়।
<cdk-virtual-scroll-viewport itemSize="50" class="list-container">
<mat-list>
<mat-list-item *cdkVirtualFor="let item of items">
{{item}}
</mat-list-item>
</mat-list>
</cdk-virtual-scroll-viewport>
এখানে:
import { Component } from '@angular/core';
@Component({
selector: 'app-virtual-list',
templateUrl: './virtual-list.component.html',
styleUrls: ['./virtual-list.component.css']
})
export class VirtualListComponent {
items = Array.from({ length: 1000 }, (_, i) => `Item #${i + 1}`);
}
এখানে, items একটি ১০০০ আইটেমের লিস্ট তৈরি করছে, যা ভার্চুয়াল স্ক্রলিংয়ের মাধ্যমে লোড হবে।
লিস্টের স্টাইলিং করতে CSS ব্যবহার করতে পারেন। যেমন, ভার্চুয়াল স্ক্রল কন্টেইনারের আউটপুটের মধ্যে প্যাডিং এবং স্ক্রলবার ইত্যাদি কাস্টমাইজ করা যায়।
.list-container {
height: 400px;
width: 300px;
border: 1px solid #ccc;
overflow: auto;
}
এখানে, height এবং width দিয়ে ভার্চুয়াল স্ক্রল কন্টেইনারের আকার নির্ধারণ করা হয়েছে, এবং overflow এর মাধ্যমে স্ক্রলিং সক্ষম করা হয়েছে।
Virtual Scrolling বা ভার্চুয়াল স্ক্রল Angular Material এর MatList কম্পোনেন্টে খুবই কার্যকরী, বিশেষত যখন অনেক আইটেম নিয়ে কাজ করা হয়। এটি পারফরম্যান্স অপটিমাইজেশন করতে সাহায্য করে, কারণ এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে। CdkVirtualScrollViewport এবং CdkScrollingModule এর মাধ্যমে সহজেই ভার্চুয়াল স্ক্রল প্রয়োগ করা যায়, যা বড় বড় ডেটা সেটের সাথে কাজ করার জন্য উপযুক্ত।
Angular Material এর Drag and Drop কম্পোনেন্ট ব্যবহার করে আপনি সহজেই উপাদানগুলোকে ড্র্যাগ এবং ড্রপ করতে পারেন, যা অ্যাপ্লিকেশনের ইন্টারঅ্যাক্টিভিটি বাড়ায়। এটি বিভিন্ন ধরনের অ্যাপ্লিকেশন যেমন তালিকা পুনর্বিন্যাস (reordering lists), ড্র্যাগ-এন্ড-ড্রপ ফাইল আপলোড, এবং আরও অনেক কাস্টম ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।
Angular Material এর MatDragDropModule এই ফিচারটি প্রদান করে, যা খুব সহজেই বিভিন্ন UI উপাদানকে ড্র্যাগ এবং ড্রপ করতে সক্ষম করে।
প্রথমে MatDragDropModule ইমপোর্ট করতে হবে, যা Angular Material এর ড্র্যাগ এবং ড্রপ ফিচার ব্যবহারের জন্য প্রয়োজনীয়।
import { MatDragDropModule } from '@angular/material/drag-drop';
@NgModule({
imports: [
MatDragDropModule
]
})
export class AppModule { }
এখন, HTML ফাইলে ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করা যাবে। এটি সাধারণত mat-list বা mat-grid কম্পোনেন্টের সাথে কাজ করে।
<div
cdkDropList
[cdkDropListData]="items"
(cdkDropListDropped)="drop($event)"
class="example-list"
>
<div *ngFor="let item of items" cdkDrag class="example-box">
{{ item }}
</div>
</div>
এখানে:
cdkDropList: এটি ড্রপ করার জন্য এলিমেন্টটি চিহ্নিত করে।cdkDrag: এটি এলিমেন্টকে ড্র্যাগযোগ্য করে তোলে।cdkDropListData: এটি ড্র্যাগড এলিমেন্টের ডাটা সংরক্ষণ করে, যেমন তালিকা আইটেম।(cdkDropListDropped): এটি ড্রপ ইভেন্টটি হ্যান্ডেল করে, যেখানে ড্র্যাগড আইটেমের নতুন অবস্থান পাওয়া যায়।import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop',
templateUrl: './drag-drop.component.html',
styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent {
items = ['Apple', 'Banana', 'Orange', 'Pineapple'];
drop(event: CdkDragDrop<string[]>) {
const previousIndex = this.items.findIndex(item => item === event.item.data);
moveItemInArray(this.items, previousIndex, event.currentIndex);
}
}
এখানে:
ড্র্যাগ এবং ড্রপ এলিমেন্টের স্টাইল পরিবর্তন করতে CSS বা SCSS ব্যবহার করা যায়। উদাহরণস্বরূপ:
.example-list {
width: 300px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 200px;
display: block;
}
.example-box {
padding: 10px;
margin: 10px;
border: solid 1px #ccc;
background: #f0f0f0;
border-radius: 4px;
display: flex;
justify-content: space-between;
}
এখানে, example-list এবং example-box ক্লাসে ড্র্যাগ এবং ড্রপ এলিমেন্টের স্টাইলিং করা হয়েছে।
ড্র্যাগ করা আইটেমের জন্য cdkDragPreview ডিরেকটিভ ব্যবহার করে কাস্টম প্রিভিউ তৈরি করা যায়।
<div cdkDrag [cdkDragPreview]="previewTemplate">
<div>{{ item }}</div>
</div>
<ng-template #previewTemplate>
<div class="custom-preview">Custom Preview</div>
</ng-template>
এখানে, ড্র্যাগ করা আইটেমের জন্য একটি কাস্টম প্রিভিউ তৈরি করা হয়েছে।
ড্র্যাগ এবং ড্রপ ইভেন্ট কাস্টমাইজ করতে cdkDragStarted এবং cdkDragEnded ইভেন্ট হ্যান্ডল করতে পারেন।
<div cdkDrag (cdkDragStarted)="onDragStarted()" (cdkDragEnded)="onDragEnded()">
<div>{{ item }}</div>
</div>
onDragStarted() {
console.log('Drag started');
}
onDragEnded() {
console.log('Drag ended');
}
ড্র্যাগ এবং ড্রপ ফিচারের জন্য পজিশন কাস্টমাইজ করা যায়। cdkDropList এর মাধ্যমে আপনি ড্র্যাগড আইটেমটি কোন জায়গায় ড্রপ করতে পারবেন তা নিয়ন্ত্রণ করতে পারেন।
<div cdkDropList [cdkDropListConnectedTo]="['list2']">
<!-- Your drop list content -->
</div>
<div id="list2" cdkDropList [cdkDropListConnectedTo]="['list1']">
<!-- Another drop list content -->
</div>
এখানে, দুটি ড্রপ লিস্ট একে অপরের সাথে কানেক্ট করা হয়েছে।
Angular Material এর ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করে আপনি সহজেই ইন্টারঅ্যাকটিভ, ডাইনামিক ইউআই তৈরি করতে পারেন। এর মাধ্যমে আপনি তালিকা পুনর্বিন্যাস, আইটেম স্থানান্তর, এবং আরও অনেক ধরনের ড্র্যাগ-এন্ড-ড্রপ ইন্টারঅ্যাকশন তৈরি করতে পারবেন। MatDragDropModule এবং cdkDragDrop ডিরেকটিভ ব্যবহার করে ড্র্যাগ এবং ড্রপ কম্পোনেন্টের কার্যকারিতা বাড়ানো যায় এবং কাস্টমাইজ করা যায়।
Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য উপযোগী ড্র্যাগ এবং ড্রপ ফিচার সহজেই ইমপ্লিমেন্ট করতে পারেন। এই ফিচারটি বিভিন্ন উপাদানকে এক জায়গা থেকে অন্য জায়গায় ড্র্যাগ ও ড্রপ করার মাধ্যমে ব্যবস্থা নিয়ন্ত্রণ করতে সহায়তা করে।
Angular Material এর CDK Drag and Drop একটি সহজ এবং শক্তিশালী উপায় সরবরাহ করে যা ড্র্যাগ এবং ড্রপ কার্যকারিতা দ্রুত এবং কার্যকরভাবে অ্যাপ্লিকেশনে যুক্ত করতে পারে।
প্রথমে আপনাকে @angular/cdk/drag-drop মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
DragDropModule
]
})
export class AppModule { }
এখানে DragDropModule ইনস্টল করা হয়েছে, যা ড্র্যাগ এবং ড্রপ কার্যকারিতার জন্য প্রয়োজনীয় সেবা সরবরাহ করে।
এখন, HTML টেমপ্লেটে cdkDrag এবং cdkDrop ডিরেকটিভ ব্যবহার করে ড্র্যাগ এবং ড্রপ ফিচার প্রয়োগ করা যেতে পারে।
এটি একটি সিম্পল ড্র্যাগ এবং ড্রপ ডেমো:
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div cdkDrag *ngFor="let item of items" class="example-box">
{{item}}
</div>
</div>
এখানে:
এখন কম্পোনেন্ট ক্লাসে ড্র্যাগ এবং ড্রপ ফাংশনটি ইমপ্লিমেন্ট করতে হবে, যা ড্র্যাগড উপাদানকে পরিচালনা করবে।
import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop',
templateUrl: './drag-drop.component.html',
styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent {
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
drop(event: CdkDragDrop<string[]>) {
const previousIndex = this.items.indexOf(event.item.data);
const currentIndex = event.currentIndex;
// List item reorder
moveItemInArray(this.items, previousIndex, currentIndex);
}
}
এখানে:
টেক্সট, বোতাম, বা অন্যান্য উপাদান গুলো স্টাইল করতে CSS ব্যবহার করা যেতে পারে। ড্র্যাগ এবং ড্রপ উপাদানের জন্য স্টাইল যুক্ত করতে:
.example-list {
width: 200px;
max-height: 400px;
border: solid 1px #ccc;
padding: 10px;
display: flex;
flex-direction: column;
}
.example-box {
padding: 10px;
margin: 5px;
background-color: #e0e0e0;
border-radius: 5px;
cursor: move;
}
এখানে:
আপনি চাইলে ড্র্যাগ এবং ড্রপ অপারেশনের জন্য অর্ডার পরিবর্তন করতে পারেন এবং ফাংশনালিটি আরো উন্নত করতে পারেন। এর মাধ্যমে আপনি আইটেমগুলির অবস্থান পরিবর্তন করে ডেটা সংরক্ষণ বা অন্য কোনো কার্যকরী কাস্টমাইজেশন করতে পারেন।
এটি moveItemInArray ফাংশন দিয়ে করতে পারেন, যা উপাদানের অবস্থান পরিবর্তন করে:
import { moveItemInArray } from '@angular/cdk/drag-drop';
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
আপনি Nested Drag and Drop প্রয়োগ করতে চাইলে, উপাদানগুলোর মধ্যে একাধিক স্তর তৈরি করতে পারেন। উদাহরণস্বরূপ:
<div cdkDropList [cdkDropListData]="items" class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of items" cdkDrag>
<div>{{item.name}}</div>
<div cdkDropList [cdkDropListData]="item.children" (cdkDropListDropped)="drop($event)">
<div *ngFor="let child of item.children" cdkDrag>{{child.name}}</div>
</div>
</div>
</div>
এখানে, একটি অভ্যন্তরীণ cdkDropList আছে যা আইটেমের মধ্যে nested ড্র্যাগ এবং ড্রপ অনুমোদন করে।
Angular Material এর Drag and Drop ফিচার একটি অত্যন্ত কার্যকরী টুল, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও স্বতঃস্ফূর্ত ও উপযোগী করে তোলে। CDK Drag and Drop ব্যবহারের মাধ্যমে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্র্যাগ এবং ড্রপ কার্যকারিতা অত্যন্ত সহজভাবে বাস্তবায়ন করতে পারবেন। এটি লেজি লোডিং, নেস্টেড ড্র্যাগ, এবং ফ্লেক্সিবল ডেটা পরিচালনা সমর্থন করে, যা বড় অ্যাপ্লিকেশনগুলোতে পারফরম্যান্স উন্নত করতে সহায়তা করে।
Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি সহজেই উপাদানগুলোকে এক স্থান থেকে অন্য স্থানে সরাতে (drag) এবং সঠিক স্থানে রাখার (drop) সুবিধা প্রদান করতে পারেন। এই ফিচারটি বিশেষ করে টেবিল, লিস্ট, বা ট্রি কম্পোনেন্টে ব্যবহার করা যেতে পারে যেখানে ব্যবহারকারীরা উপাদানগুলিকে নতুনভাবে সাজানোর বা পুনর্বিন্যাস করার প্রয়োজন অনুভব করেন।
এই টপিকটি ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং (reordering) করার পদ্ধতি সম্পর্কে ব্যাখ্যা করবে, যেখানে উপাদানগুলোর মধ্যে স্থানান্তর করা হবে এবং ডেটার স্থায়িত্ব বজায় রাখা হবে।
প্রথমে Angular CDK এর DragDropModule মডিউলটি ইমপোর্ট করতে হবে।
আপনার app.module.ts ফাইলে DragDropModule ইমপোর্ট করুন:
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
DragDropModule
]
})
export class AppModule { }
এখন আমরা Drag and Drop ফিচার ব্যবহার করে একটি লিস্ট তৈরি করবো যেখানে ব্যবহারকারী আইটেমগুলোকে ড্র্যাগ এবং ড্রপ করে রিসোর্ট (rearrange) করতে পারবেন।
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of items; let i = index" cdkDrag>
<div class="list-item">
{{item}}
</div>
</div>
</div>
এখানে:
এখন, drop() মেথড ব্যবহার করে আমরা ড্রপ করা আইটেমের অবস্থান পরিবর্তন করতে পারবো। ড্রপ ইভেন্টে ড্রপ করা আইটেমের ইনডেক্স এবং তার নতুন অবস্থান জানিয়ে ডেটার রিসোর্টিং করা হবে।
import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop-list',
templateUrl: './drag-drop-list.component.html',
styleUrls: ['./drag-drop-list.component.css']
})
export class DragDropListComponent {
items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
drop(event: CdkDragDrop<string[]>) {
const prevIndex = this.items.findIndex(item => item === event.item.data);
const currentIndex = event.currentIndex;
// রিসোর্টিং করা
this.items.splice(prevIndex, 1);
this.items.splice(currentIndex, 0, event.item.data);
}
}
এখানে:
আপনি চাইলে cdkDropList এবং cdkDrag এর জন্য কাস্টম স্টাইল যোগ করতে পারেন। যেমন:
.list-item {
padding: 10px;
margin: 5px;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
}
cdk-drop-list {
width: 200px;
max-height: 300px;
overflow-y: auto;
}
এখানে:
ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং আরো ইন্টারঅ্যাকটিভ এবং সুন্দর করার জন্য আপনি Angular animations ব্যবহার করতে পারেন। Angular CDK ড্র্যাগ-এন্ড-ড্রপ কম্পোনেন্টের সাথে অ্যানিমেশন যুক্ত করতে আপনি moveItemInArray ফাংশনটি ব্যবহার করতে পারেন।
import { moveItemInArray } from '@angular/cdk/drag-drop';
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
এখানে, moveItemInArray ফাংশনটি অ্যারের মধ্যে আইটেমগুলিকে নতুন অবস্থানে স্থানান্তর করতে সাহায্য করবে।
Angular CDK Drag and Drop ফিচার ব্যবহার করে আপনি সহজেই ড্র্যাগ এবং ড্রপ অপারেশন দিয়ে উপাদানগুলিকে রিসোর্ট (reorder) করতে পারবেন। এটি বিশেষ করে ডেটা টেবিল, লিস্ট এবং অন্য যেকোনো UI এলিমেন্টের জন্য উপযুক্ত, যেখানে ব্যবহারকারীরা উপাদানগুলিকে পুনর্বিন্যাস করতে চান। Angular CDK এর DragDropModule একটি শক্তিশালী এবং কাস্টমাইজেবল টুল যা আপনি আপনার অ্যাপ্লিকেশনে সহজেই প্রয়োগ করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
